// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when,$namespace}
@use "./mixin/mixins.scss" as *;
@use './mixin/function.scss' as *;

@import "common/index.scss";

$e-checkbox-icon-wrap-margin-right: 6px !default;
$e-checkbox-icon-wrap-font-size: 6px !default;
$e-checkbox-icon-wrap-border-width: 1px !default;
$e-checkbox-icon-wrap-border-color: #c8c9cc !default;
$e-checkbox-icon-wrap-icon-line-height: 0 !default;
$e-checkbox-icon-wrap-circle-border-radius: 100% !default;
$e-checkbox-icon-wrap-square-border-radius: 3px !default;
$e-checkbox-icon-wrap-checked-color: #fff !default;
$e-checkbox-icon-wrap-checked-background-color: red !default;
$e-checkbox-icon-wrap-checked-border-color: #2979ff !default;
$e-checkbox-icon-wrap-disabled-background-color: #ebedf0 !default;
$e-checkbox-icon-wrap-disabled-checked-color: #c8c9cc !default;
$e-checkbox-label-margin-left: 5px !default;
$e-checkbox-label-margin-right: 12px !default;
$e-checkbox-label-font-size: 15px !default;
$e-checkbox-label-disabled-color: #c8c9cc !default;

@include bem_b(checkbox) {
  /* #ifndef APP-NVUE */
  @include flex(row);
  /* #endif */
  overflow: hidden;
  flex-direction: row;
  align-items: center;

  &-label--left {
    flex-direction: row;
  }

  &-label--right {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  @include bem_e(icon) {
	  margin-right: $e-checkbox-icon-wrap-margin-right;
    &-wrap {
      /* #ifndef APP-NVUE */
      box-sizing: border-box;
      // nvue下，border-color过渡有问题
      transition-property: border-color, background-color, color;
      transition-duration: 0.2s;
      /* #endif */
      @include VueAndNvueStyleAttr("color","text-color", "regular");
      @include flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      text-align: center;
      

      font-size: $e-checkbox-icon-wrap-font-size;
      border-width: $e-checkbox-icon-wrap-border-width;
      border-color: $e-checkbox-icon-wrap-border-color;
      border-style: solid;

      /* #ifdef MP-TOUTIAO */
      // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
      &__icon {
        line-height: $e-checkbox-icon-wrap-icon-line-height;
      }

      /* #endif */

      &--circle {
        border-radius: $e-checkbox-icon-wrap-circle-border-radius;
      }

      &--square {
        border-radius: $e-checkbox-icon-wrap-square-border-radius;
      }

      &--checked {
        color: $e-checkbox-icon-wrap-checked-color;
        background-color: $e-checkbox-icon-wrap-checked-background-color;
        border-color: $e-checkbox-icon-wrap-checked-border-color;
      }

      &--disabled {
        background-color: $e-checkbox-icon-wrap-disabled-background-color !important;
      }

      &--disabled--checked {
        color: $e-checkbox-icon-wrap-disabled-checked-color !important;
      }
    }
  }

  @include bem_e(label) {
    /* #ifndef APP-NVUE */
    word-wrap: break-word;
    /* #endif */
    margin-left: $e-checkbox-label-margin-left;
    margin-right: $e-checkbox-label-margin-right;
    @include VueAndNvueStyleAttr("color","text-color", "regular");
    font-size: $e-checkbox-label-font-size;
    @include bem_m(disabled) {
      color: $e-checkbox-label-disabled-color;
    }
  }
}
